<template>
  <h2>MTabSticky 粘性Tab组件</h2>
  <alert-style></alert-style>

  <h3>案例</h3>
  <p>本组件依托vant组件。案例中无法体现粘性效果，请在业务代码中验证。</p>
  <code-demo-mobile :code="htmlCode" :scriptCode="scriptCode">
    <Tabs class="m-tab-sticky u-round" v-model:active="current" sticky :ellipsis="false">
      <Tab v-for="item in items" :title="item.label" :name="item.label">
        {{ item.label }}
      </Tab>
    </Tabs>
  </code-demo-mobile>
</template>

<script setup>
import { ref } from 'vue'
import { Tab, Tabs } from 'vant'

const current = ref('风险结果摘要')
const items = [
  { label: '风险结果摘要' },
  { label: '风险核查分析' },
  { label: '基本信息' },
  { label: '经营信息' },
  { label: '风险信息' },
]

const htmlCode = `<div style="background: red">
  <Tabs class="m-tab-sticky u-round" v-model:active="current" sticky :ellipsis="false">
    <Tab v-for="item in items" :title="item.label" :name="item.label">
      {{ item.label }}
    </Tab>
  </Tabs>
</div>`

const scriptCode = `import { ref } from 'vue'
import { Tab, Tabs } from 'vant'

const current = ref('风险结果摘要')
const items = [
  { label: '风险结果摘要' },
  { label: '风险核查分析' },
  { label: '基本信息' },
  { label: '经营信息' },
  { label: '风险信息' },
]`
</script>
